<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :label-width="100" inline>
          <FormItem label="车型名字">
            <Input v-model="query.vehicleClassifyName" placeholder="请输入查询的车型名字"></Input>
          </FormItem>
          <FormItem label="车型状态">
            <Select v-model="query.vehicleClassifyStatus" style="width: 200px">
              <Option value="">全部状态</Option>
              <Option value="1">启用</Option>
              <Option value="2">禁用</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">查询</Button>
          </FormItem>
          <FormItem>
            <Button type="success" @click="add()">新增</Button>
          </FormItem>
        </Form>

        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowEditModel" title="修改数据" @on-ok="submitUpdate">
      <Form :model="rowData" label-position="left">
        <FormItem label="车辆名字">
          <Input type="text" v-model="rowData.vehicleClassifyName"></Input>
        </FormItem>
        <FormItem label="车辆规格">
          <Input type="text" v-model="rowData.vehicleClassifySpecification"></Input>
        </FormItem>
        <FormItem label="车辆载重">
          <Input type="text" v-model="rowData.vehicleClassifyLoad"></Input>
        </FormItem>
        <FormItem label="车辆起步价">
          <Input type="text" v-model="rowData.vehicleClassifyStarting"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="isShowAddModel" title="新增数据" @on-ok="submitAdd">
      <Form :model="addRow" label-position="left">
        <FormItem label="车辆名字">
          <Input type="text" v-model="addRow.vehicleClassifyName"></Input>
        </FormItem>
        <FormItem label="车辆规格">
          <Input type="text" v-model="addRow.vehicleClassifySpecification"></Input>
        </FormItem>
        <FormItem label="车辆载重">
          <Input type="text" v-model="addRow.vehicleClassifyLoad"></Input>
        </FormItem>
        <FormItem label="车辆起步价">
          <Input type="text" v-model="addRow.vehicleClassifyStarting"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "vehicle",
  data() {
    return {
      query: {
        vehicleClassifyName: '',
        vehicleClassifyStatus: '',
        startTime: '',
        endTime: '',
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      total: 0,
      isShowEditModel: false,
      rowData: {},
      isShowAddModel: false,
      addRow: {
        vehicleClassifyName: '',
        vehicleClassifySpecification: '',
        vehicleClassifyLoad: '',
        vehicleClassifyStarting: ''
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    times(val) {
      this.query.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.query.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    search() {
      this.loadData()
    },
    pageChange(val) {
      this.query.pageNum = val
      this.loadData()
    },
    loadData() {
      let that = this;
      that.$http.postJson('/vehicle/list', that.query).then(res => {
        that.tableData = res.data ? res.data : []
        that.total = res.total
        that.query.pageSize = res.pageSize
        that.query.pageNum = res.pageNum
      }).catch(() => {
        that.tableData = []
        that.total = 0
        that.query.pageSize = 10
        that.query.pageNum = 1
      })
    },
    getCols() {
      let that = this;
      return [
        {title: '车辆分类编号', key: 'vehicleClassifyId', tooltip: true, align: 'center', width: 150},
        {title: '车辆名字', key: 'vehicleClassifyName', tooltip: true, align: 'center'},
        {title: '车辆规格', key: 'vehicleClassifySpecification', tooltip: true, align: 'center', width: 200},
        {title: '车辆载重', key: 'vehicleClassifyLoad', tooltip: true, align: 'center', width: 150},
        {title: '车辆起步价', key: 'vehicleClassifyStarting', tooltip: true, align: 'center', width: 200},
        {title: '注册时间', key: 'vehicleClassifyCreatime', tooltip: true, align: 'center', width: 250},
        {
          title: '车辆状态', key: 'vehicleClassifyStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.vehicleClassifyStatus === "1" ? "success" : "error"},
              on: {
                click() {
                  that.deleteRow(obj.row)
                }
              }
            }, obj.row.vehicleClassifyStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '操作', key: 'operator', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"}, on: {
                click() {
                  that.editRow(obj.row)
                }
              }
            }, '编辑')
          }
        }
      ]
    },
    editRow(row) {
      this.isShowEditModel = true
      this.rowData = row
    },
    deleteRow(row) {
      let that = this;
      row.vehicleClassifyStatus = row.vehicleClassifyStatus === "1" ? "2" : "1"
      that.$http.postJson('/vehicle/delete', row).then(res => {
        that.$Message.success("更新车型状态成功");
        that.loadData()
      }).catch(() => {
        that.loadData()
        that.$Message.success("更新车型状态失败");
      })
    },
    submitUpdate() {
      let that = this;
      that.$http.postJson('/vehicle/update', this.rowData).then(res => {
        that.$Message.success("更新车型信息成功");
        that.loadData()
      }).catch(() => {
        that.loadData()
        that.$Message.success("更新车型信息失败");
      })
    },
    submitAdd() {
      let that = this;
      that.$http.postJson('/vehicle/add', this.addRow).then(res => {
        that.$Message.success("新增车型信息成功");
        that.loadData()
      }).catch(() => {
        that.loadData()
        that.$Message.success("新增车型信息失败");
      })
    },
    add() {
      this.isShowAddModel = true
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
